import { forwardRef, useImperativeHandle, useMemo } from 'react';
import { Form, Input, Button, Select } from 'antd';
import { TextWidget } from '@inbiz/react';
import { getLangSiteType, getQueryParams } from '../utils';
import '../style.less';

const QueryBar = forwardRef((props: any, ref) => {
    const { allLangs, queryTableRef, currentType, components, onQueryLanguageType, isApp, siteInfo, selectedRow, isForm } = props;
    const [form] = Form.useForm();

    const reset = () => {
        form.resetFields();
        onQueryLanguageType(currentType, false);
    };

    const onQuery = () => {
        const formData = form.getFieldsValue();
        const quertParams: any = {};
        if (formData?.key) {
            quertParams['key'] = formData?.key;
        };
        if (formData?.code) {
            quertParams['code'] = formData?.code;
        };
        const kindConditions = allLangs?.filter((item1: any) => formData[item1?.Code])?.map((item2: { Name: string; Code: string; }) => {
            return {
                kindName: item2?.Name,
                kindCode: item2?.Code,
                langText: formData[item2?.Code],
            };
        });
        if (kindConditions && kindConditions?.length > 0) {
            quertParams['kindConditions'] = kindConditions;
        };
        queryTableRef?.current?.getLangData({ ...getQueryParams(isForm, currentType, isApp, selectedRow, siteInfo), ...quertParams }, 10, 0);
    };

    const componentOptions = useMemo(() => {
        return components?.map((item: { name: string; key: string; }) => ({ label: <TextWidget>{item?.name}</TextWidget>, value: item?.key }));
    }, [components]);

    useImperativeHandle(ref, () => {
        return {
            queryForm: form,
            resetForm: reset,
        };
    });

    return (
        <div className='inbiz-lang-manage-query-bar'>
            <Form
                form={form}
                name='langQueryBar'
                layout='inline'
                labelAlign='right'
                labelWrap
            >
                {
                    currentType == '1'
                        ?
                        <Form.Item
                            name='code'
                            label='组件'
                        >
                            <Select
                                showSearch
                                options={componentOptions}
                                allowClear
                                placeholder='请选择组件'
                                style={{ width: 179 }}
                                filterOption={(inputValue: string, option?: any) => {
                                    return option?.value?.indexOf(inputValue) != -1;
                                }}
                            />
                        </Form.Item>
                        :
                        <>
                            <Form.Item
                                name='key'
                                label='唯一标识'
                            >
                                <Input placeholder='请输入唯一标识' />
                            </Form.Item>
                            {
                                allLangs?.map((item: { Code: string; Name: string }) => {
                                    return (
                                        <Form.Item
                                            key={item?.Code}
                                            label={item?.Name}
                                            name={item?.Code}
                                        >
                                            <Input placeholder={`请输入${item?.Name}`} />
                                        </Form.Item>
                                    )
                                })
                            }
                        </>
                }
                <div className='inbiz-lang-manage-query-bar-buttons'>
                    <Button type='primary' onClick={onQuery}>
                        查询
                    </Button>
                    <Button style={{ marginLeft: 20 }} onClick={reset}>
                        重置
                    </Button>
                </div>
            </Form>
        </div>
    )
});

export default QueryBar;